<template>
  <div class="container">
    <!-- <div class="header space-between padding-24">
          <div class="h-left"></div>
          <div class="center">{{title}}</div>
          <div class="h-right"><img src="" alt=""></div>  
    </div>-->
    <Header v-bind:isHave="isHave" v-bind:title="title"></Header>
    <div class="top-nav bg-f flex">
      <div class="nav-item" v-for="(item,index) in menulist" :key="index">
        <router-link :to="item.url">
          <img :src="item.logo" alt />
          <p class="fs-32">{{item.title}}</p>
          <p class="color-9 fs-26">{{item.num}}</p>
        </router-link>
      </div>
    </div>
    <!-- 我喜欢的音乐 -->
    <div class="my-love">
      <!-- <div class="title">我喜欢的音乐</div> -->
      <div class="item" @click="toMyLove">
        <div class="img">
          <img :src="loveMusicMes.background" alt />
        </div>
        <div class="content">
          <div class="name">{{loveMusicMes.name}}</div>
          <div class="num">{{loveMusicMes.music_num}}首</div>
        </div>
      </div>
    </div>
    <div class="my-musiclist padding-24 bg-f">
      <div class="musiclist-top space-between">
        <div class="left center-col">
          <div class="color-9 center after" :class="{color4:cur==1}" @click="select(1)">自建歌单</div>
          <div class="color-9 center" :class="{color4:cur==2}" @click="select(2)">收藏歌单</div>
        </div>
        <div class="right center-col">
          <img :src="add" alt class="add" @click="addshow=true,delmusic=false" />
          <img :src="more" alt class="more" @click="delmusic=true" v-if="delmusic==false" />
          <p class="color-6" v-else @click="delmusic=false">取消</p>
        </div>
      </div>
      <div class="list">
        <div class="list-item" v-for="(item,index) in list" :key="index">
          <div class="center-col" @click="gotomusiclist(item)">
            <div class="left center-col">
              <div class="yuan bg-r center" v-if="delmusic" @click.stop="del(item)">
                <p class="bg-f"></p>
              </div>
              <img :src="item.song_sheet_photo" alt />
            </div>

            <div class="right flex-column">
              <p>{{item.song_sheet_name}}</p>
              <p class="color-9">{{item.music_num}}首</p>
            </div>
          </div>
          <div class="more" v-show="cur==1">
            <img :src="more" alt @click="editSongSheet(item)" />
          </div>
        </div>
      </div>
    </div>
    <div class="logout center" v-if="delmusiclist" @touchmove.prevent>
      <div class="content">
        <div class="center fs-36">确定删除此歌单吗？</div>
        <div class="center-col">
          <div class="cancel center" @click="delmusiclist=false,delid=''">取消</div>
          <div class="sure center" @click="suredel">确定</div>
        </div>
      </div>
    </div>
    <div class="addmusic-list" @touchmove.prevent v-if="addshow">
      <div class="contents bg-f5">
        <div class="top padding-24 space-between">
          <p class="fs-32 color-6" @click="cancel">取消</p>
          <p class="fs-32">新建歌单</p>
          <p class="fs-32 color-6" @click="sure">确定</p>
        </div>
        <div class="setmusic padding-24">
          <input type="text" placeholder="歌单名称" class="fs-32 color-6 bg-f5" v-model="songname" />
          <div class="center-col">
            <div class="yuan center bg-f" :class="{active:ac}" @click="check">
              <p></p>
            </div>
            <p class="fs-32 color-6">设置为隐私歌单</p>
          </div>
        </div>
      </div>
    </div>
    <Footer v-bind:titles="title"></Footer>
  </div>
</template>

<script>
import Footer from "@/components/footer-nav";
export default {
  name: "mine",
  data() {
    return {
      cur: 1,
      ac: false,
      isHave: true,
      addshow: false,
      title: "我的音乐",
      songname: "",
      delmusic: false,
      delmusiclist: false,
      delid: "",
      userinfo: "",
      add: require("../../assets/mine/add.png"),
      more: require("../../assets/public/more.png"),
      folder: require("../../assets/mine/folder.png"),
      menulist: [
        // {
        //   title:'本地音乐',
        //   logo:require("../../assets/mine/local.png"),
        //   url:'localmusic',
        //   num:0,
        // },
        // {
        //   title:'最近播放',
        //   logo:require("../../assets/mine/recently.png"),
        //   url:'recentlyplay',
        //   num:0,
        // },
        {
          title: "我的电台",
          logo: require("../../assets/mine/radio.png"),
          url: "myradio",
          num: 0
        },
        {
          title: "我的收藏",
          logo: require("../../assets/mine/collection.png"),
          url: "mycollection",
          num: 0
        }
      ],
      list: [
        // {
        //   name:'我的歌单1',
        //   num:0,
        //   url:''
        // },
        // {
        //   name:'我的歌单2',
        //   num:0,
        //   url:''
        // }
      ],
      array1: [],
      array2: [],
      loveMusicMes: {}
    };
  },
  watch: {
    array1: function(val) {
      this.list = val;
    }
  },
  components: {
    Footer
  },
  created() {
    this.getuserinfo();
    this.myFavouriteMusic(); //获取我喜欢的音乐
    setTimeout(() => {
      this.list = this.array1;
    }, 500);
  },
  mounted() {},
  methods: {
    // 编辑歌单
    editSongSheet(item) {
      console.log(item.song_sheet_id, "---item.song_sheet_id");
      this.$router.push({
        path: "/mine/edit-sheet",
        query: { id: item.song_sheet_id }
      });
    },
    // 获取我喜欢的歌曲信息
    myFavouriteMusic() {
      const url = this.$host1 + `home/myFavouriteMusic`;
      this.$axios
        .get(url)
        .then(res => {
          console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
            this.loveMusicMes = res.data.data;
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    getuserinfo() {
      var url = this.$host1 + `home/getPersonalMsg`;
      this.$axios
        .get(url)
        .then(res => {
          //console.log(res)
          //return
          if (res.status == 200) {
            let resData = res.data;
            if (resData.code == 200) {
              this.userinfo = resData.data;
              this.getusercollectionSongSheetList();
              this.getuserSongSheetList();
            } else if (resData.code == 0) {
              //  this.$router.push('/login');
            } else {
              this.AlertWin(resData.message);
            }
          }
        })
        .catch(() => {
          this.AlertWin("网络错误！请稍后重试！");
        });
    },
    getuserSongSheetList() {
      let url = this.$host1 + `home/userSongSheetList`;
      this.$axios
        .get(url, {
          params: {
            pageSize: 10000,
            page: 1,
            user_id: this.userinfo.user_id
          }
        })
        .then(res => {
          //console.log(res)
          //return
          if (res.status == 200) {
            let resData = res.data;
            if (resData.code == 200) {
              this.array1 = resData.data.list;
            } else {
              this.array1 = [];
            }
          }
        })
        .catch(() => {
          this.AlertWin("网络错误！请稍后重试！");
        });
    },
    getusercollectionSongSheetList() {
      let url = this.$host1 + `home/collectionSongSheetList`;
      this.$axios
        .get(url, {
          params: {
            pageSize: 10000,
            page: 1,
            user_id: this.userinfo.user_id
          }
        })
        .then(res => {
          //console.log(res)
          //return
          if (res.status == 200) {
            let resData = res.data;
            if (resData.code == 200) {
              this.array2 = resData.data.list;
            } else {
              this.array2 = [];
            }
          }
        })
        .catch(() => {
          this.AlertWin("网络错误！请稍后重试！");
        });
    },
    check() {
      this.ac = !this.ac;
    },
    cancel() {
      this.songname = "";
      this.addshow = false;
    },
    sure() {
      if (this.songname == "") {
        this.AlertWin("请输入歌单名");
        return;
      }
      var pe = 2;
      if (this.ac == true) {
        pe = 1;
      } else {
        pe = 2;
      }
      var url = this.$host1 + `home/addSongSheet`;
      var data = {
        song_sheet_name: this.songname,
        is_personal: pe
      };
      this.$axios
        .post(url, data)
        .then(res => {
          //return
          if (res.status == 200) {
            let resData = res.data;
            if (resData.code == 200) {
              this.addshow = false;
              this.songname = "";
              this.addshow = false;
              setTimeout(() => {
                this.AlertWin("添加成功");
              }, 500);
              this.getuserSongSheetList();
            } else if(resData.code == 0){
              this.AlertWin(resData.message);
              this.$router.push({
                path:'/login'
              });
            }else {
              this.AlertWin(resData.message);
            }
          }
        })
        .catch(() => {
          this.AlertWin("网络错误！请稍后重试！");
        });
    },
    select(i) {
      this.cur = i;
      this.delmusic = false;
      if (i == 1) {
        this.list = this.array1;
      } else if (i == 2) {
        this.list = this.array2;
      }
    },
    // 跳转至我喜欢的详情页
    toMyLove() {
      this.$router.push({
        path: "/index/song-sheet",
        query: { sheetStatus: 0 }
      });
    },
    gotomusiclist(item) {
      console.log("item", item);
      // 跳转到歌曲列表页
      this.$router.push({
        path: "/index/song-sheet",
        query: { id: item.song_sheet_id, sheetStatus: 1 }
      });
    },
    del(i) {
      //console.log(i)
      if (this.cur == 1) {
        this.delid = i.song_sheet_id;
      } else {
        this.delid = i.user_song_sheet_collection_id;
      }
      this.delmusiclist = true;
    },
    suredel() {
      if (this.cur == 1) {
        var url = this.$host1 + `home/delSongSheetList`;
        var data = {
          song_sheet_id: this.delid
        };
        this.$axios
          .post(url, data)
          .then(res => {
            console.log(res);
            //return
            if (res.status == 200) {
              let resData = res.data;
              if (resData.code == 200) {
                this.delmusiclist = false;
                this.getuserSongSheetList();
                setTimeout(() => {
                  this.AlertWin("删除成功");
                }, 500);
              } else {
                this.AlertWin(resData.message);
              }
            }
          })
          .catch(() => {
            this.AlertWin("网络错误！请稍后重试！");
          });
      } else {
        var url = this.$host1 + `home/delCollectionSongSheetList`;
        var data = {
          user_song_sheet_collection_id: this.delid
        };
        this.$axios
          .post(url, data)
          .then(res => {
            console.log(res);
            //return
            if (res.status == 200) {
              let resData = res.data;
              if (resData.code == 200) {
                this.delmusiclist = false;
                this.getusercollectionSongSheetList();
                setTimeout(() => {
                  this.AlertWin("删除成功");
                }, 500);
              } else {
                this.AlertWin(resData.message);
              }
            }
          })
          .catch(() => {
            this.AlertWin("网络错误！请稍后重试！");
          });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  padding-bottom: 1.2rem;
  //margin-bottom: 1.2rem;
  .header {
    .h-left {
      position: relative;
      width: 0.46rem;
      height: 0.38rem;
    }
    .h-right {
      width: 0.38rem;
      height: 0.5rem;
      background-color: pink;

      img {
        display: inline-block;
        width: 100%;
      }
    }
  }
  .top-nav {
    width: 100%;
    height: 2.1rem;
    margin-top: 1rem;
    .nav-item {
      width: 25%;
      height: 100%;
      a {
        margin: 0 auto;
        width: 80%;
        height: 100%;
        display: block;
        text-align: center;
        img {
          margin: 0.4rem auto 0.2rem;
          width: auto;
          height: 0.56rem;
        }
      }
    }
  }
  .my-love {
    width: 100%;
    padding: 0 0.24rem;
    padding-top: 0.24rem;
    box-sizing: border-box;
    height: 1.4rem;
    margin-top: 0.2rem;
    background-color: #fff;
    // .title{
    //   color: #444;
    // }
    .item {
      display: flex;
      .img {
        width: 0.88rem;
        height: 0.88rem;
        margin-right: 0.2rem;
        img {
          width: 100%;
        }
      }

      .content {
        .name {
          margin-top: 0.05rem;
        }
        .num {
          margin-top: 0.2rem;
          color: #999;
        }
      }
    }
  }
  .my-musiclist {
    height: auto;
    margin-top: 0.2rem;
    .musiclist-top {
      width: 100%;
      height: 1rem;
      .left {
        .color-9 {
          position: relative;
          width: 1.5rem;
          //background-color: greenyellow;
        }
        .color4 {
          color: #444;
        }
        .after::after {
          content: "";
          width: 0;
          height: 0.28rem;
          position: absolute;
          right: 0;
          //margin-top: 0.0rem;
          border-left: 0.01rem solid #e9e9e9;
        }
      }
      .right {
        .add {
          width: 0.3rem;
          height: 0.3rem;
          margin-right: 0.5rem;
        }
        .more {
          width: 0.1rem;
          height: 0.35rem;
        }
      }
    }
    .list {
      width: 100%;
      height: auto;
      .list-item {
        position: relative;
        height: 1rem;
        margin-bottom: 0.12rem;
        padding-bottom: 0.12rem;
        box-sizing: border-box;
        .center-col {
          width: 100%;
          height: 100%;
          .left {
            width: auto;
            min-width: 1rem;
            max-width: 1.5rem;
            //background-color: greenyellow;
            .yuan {
              width: 0.36rem;
              height: 0.36rem;
              margin-right: 0.2rem;
              p {
                width: 0.2rem;
                height: 0.03rem;
              }
            }
            img {
              width: 0.88rem;
              height: 0.88rem;
            }
          }

          .right {
            margin-left: 0.2rem;
            //width: calc(100% - 1.08rem);
            height: 0.88rem;
          }
        }
      }
      .more {
        position: absolute;
        right: 0;
        top: 0.2rem;
        width: 0.5rem;
        height: 0.5rem;
        img {
          margin-left: 0.36rem;
          width: 0.1rem;
          height: 0.35rem;
        }
      }
    }
  }
  .addmusic-list {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    .contents {
      width: 100%;
      height: 5.3rem;
      position: absolute;
      bottom: 0;
      left: 0;
      border-radius: 0.15rem 0.15rem 0 0;
      .top {
        height: 1rem;
        border-bottom: 0.01rem solid #e9e9e9;
      }
      .setmusic {
        padding: 0.2rem 0.24rem;
        input {
          width: 100%;
          height: 0.6rem;
          margin-top: 0.5rem;
          border: 0.015rem solid #999;
          border-radius: 0.12rem;
          text-indent: 0.2rem;
          //background-color: greenyellow;
        }
        .center-col {
          width: 100%;
          height: 0.6rem;
          margin-top: 0.2rem;
          //background-color: greenyellow;
          .yuan {
            width: 0.4rem;
            height: 0.4rem;
            margin-right: 0.2rem;
            background-color: #fff;
            border: 0.01rem solid #e9e9e9;
            text-align: center;
            p {
              margin: 0 auto;
              width: 0.3rem;
              height: 0.3rem;
              border-radius: 50%;
              background-color: #fff;
            }
          }
          .active {
            border: 0.01rem solid #f44349;
            p {
              background-color: #f44349;
            }
          }
        }
      }
    }
  }
}
</style>
